<template>
    <div class="record-plane">
        <div class="opers flex v-c">
            <el-form :inline="true" class="filter-blk flex-1">
                <el-form-item class="ml-20" label="创建年份">
                    <el-date-picker
                        v-model="filterForm.createyear"
                        type="year"
                        placeholder="选择年"
                        format="yyyy"
                        value-format="yyyy"
                        @change="dateChange"
                    >
                    </el-date-picker>
                </el-form-item>
            </el-form>
            <div>
                <el-button
                    type="blue"
                    @click="newAction"
                    v-if="hasPermission('029017')"
                    :disabled="!$store.getters.hasEditPermission"
                    ><i class="iconfont icon-add"></i> 添加</el-button
                >
            </div>
        </div>
        <el-table class="mt-20" :data="dataList" style="width: 100%" v-loading="loading">
            <el-table-column prop="trainingtime" label="培训时间"></el-table-column>
            <el-table-column prop="trainingcontents" label="培训内容"></el-table-column>
            <el-table-column prop="participant" label="参与人员"></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button :loading="viewing" type="green" @click="viewAction(scope.row)"
                            >点击查看</el-button
                        >
                        <template v-if="userType == 2">
                            <el-button
                                :loading="adding"
                                type="blue"
                                @click="editAction(scope.row)"
                                v-if="hasPermission('029018')"
                                :disabled="!$store.getters.hasEditPermission"
                                >编辑</el-button
                            >
                            <el-button
                                :loading="deleting"
                                type="red"
                                @click="deleteAction(scope.row)"
                                v-if="hasPermission('029019')"
                                :disabled="!$store.getters.hasEditPermission"
                                >删除</el-button
                            >
                        </template>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="total > 0"
            class="text-right mt-20 mr-20"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, total, jumper"
            :total="total"
        >
        </el-pagination>

        <!-- 详情 start -->
        <el-dialog
            v-if="viewModalVisible"
            title="详情"
            :visible.sync="viewModalVisible"
            width="400px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <Detail ref="detail" :activeData="activeData"> </Detail>
        </el-dialog>
        <!-- 详情 end -->
        <!-- 新建/编辑 start -->
        <el-dialog
            v-if="newModalVisible"
            :title="newModalTitle"
            :visible.sync="newModalVisible"
            width="400px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <New
                ref="newData"
                :activeData="activeData"
                :businessId="id"
                @success="submitSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newModalVisible = false"
            >
            </New>
            <div slot="footer">
                <el-button type="cancel" @click="newModalVisible = false">取消</el-button>
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >确定</el-button
                >
            </div>
        </el-dialog>
    </div>
</template>
<script>
import Detail from "@/components/census/record/TrainDetail.vue"
import New from "@/components/census/record/TrainNew.vue"
import { mapState } from "vuex"
export default {
    name: "recordPlan",
    components: {
        New,
        Detail,
    },
    props: {
        id: {
            type: String,
            default: "",
        },
    },
    computed: {
        ...mapState(["siteInfos"]),
        userType() {
            return this.siteInfos ? this.siteInfos.userType : ""
        },
    },
    watch: {},
    data() {
        return {
            filterForm: {
                createyear: "" + new Date().getFullYear(),
            },
            typeList: [],
            total: 0,
            loading: false,
            currentPage: 1,
            pageSize: 10,
            dataList: [],
            activeImg: "",
            viewing: false,
            viewModalVisible: false,

            newModalTitle: "",
            newModalVisible: false,
            activeData: null,
            adding: false,
            deleting: false,
        }
    },
    methods: {
        getData(page) {
            this.loading = true
            let params = Object.assign(
                {
                    page: page,
                    limit: this.pageSize,
                },
                this.filterForm
            )
            if (this.id) {
                params.businessId = this.id
            }
            this.$get("/business/firetraining/firetrainingListPage", params).then(
                (res) => {
                    this.loading = false
                    this.dataList = res.data.Items
                },
                (err) => {
                    //
                }
            )
        },
        getDataById(id, cbk) {
            this.$get("/business/firetraining/firetrainingDetail", { id: id }).then(
                (res) => {
                    this.viewing = false
                    let thisData = res.data
                    thisData = Object.assign(res.data, res.data.fileInfo)
                    cbk && cbk(thisData)
                },
                (err) => {
                    if (err) {
                        this.$message.error(err.msg)
                    }
                }
            )
        },
        viewAction(item) {
            this.viewing = true
            this.getDataById(item.id, (data) => {
                this.viewing = false
                this.activeData = data
                this.viewModalVisible = true
            })
        },
        dateChange(value) {
            this.getData(1)
        },
        newAction() {
            this.newModalTitle = "添加消防培训"
            this.newModalVisible = true
            this.activeData = null
        },
        editAction(item) {
            this.getDataById(item.id, (data) => {
                this.activeData = data
                this.newModalTitle = "编辑消防培训"
                this.newModalVisible = true
            })
        },
        submitAction() {
            this.$refs.newData.submitAction()
        },
        submitSuccessAction() {
            this.adding = false
            this.newModalVisible = false
            this.getData(this.currentPage)
        },
        deleteAction(item, index) {
            this.showConfirm("确定删除该数据吗？", () => {
                this.deleting = true
                this.$post("/business/firetraining/firetrainingDelete", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
    },
    created() {
        this.getData(1)
    },
}
</script>
